<script setup lang="ts">
import { ref, reactive } from 'vue'
//引入iconback组件
import IconBack from '@/components/icon-backto/index.vue'
//引入search组件
import SearchModel from '@/components/search-model/index.vue'
import { onLoad } from '@dcloudio/uni-app'
//引入shoplistdetail组件
import ShopListDetail from './components/shoplistdetail.vue'
//引入api order订单的index
import { doGetShopDeliveryMethod, GetShopInfo, SearchShopInfo } from '@/apis/order/index'
import { useScrollViewHeight } from '@/hooks'

const { scrollViewHeight } = useScrollViewHeight(false)
interface ExtraMap {
    AllDeliveryCount: string
    miniDeliveryCount: string
}

const extraMap = ref<ExtraMap>({ AllDeliveryCount: '0', miniDeliveryCount: '0' })
const pageConfig = reactive({
    current: 1,
    size: 10,
    pages: 0,
})
//tabs 列表
const list = reactive([
    {
        name: '待付款',
    },
    {
        name: '待发货',
    },
    {
        name: '待收货',
    },
    {
        name: '已完成',
    },
    {
        name: '已关闭',
    },
])
//当前选中的tabs
const current = ref(0)
//控制发货模块效果
// const sendShow = ref(false)
enum status {
    UNPAID, // 未支付的
    UN_DELIVERY, // 未发货
    UN_RECEIVE, // 未收货
    COMPLETED, //已完成
    CLOSED, //关闭
}
const shoplist = ref([])

onLoad(() => {
    uni.$emit('updateTitle')
    handleGetShopList()
})

/**
 *  tabs切换
 * @param {*} index
 */
const change = (index: number) => {
    current.value = index
    pageConfig.current = 1
    shoplist.value = []
    handleGetShopList()
}
/**
 * 发送请求获取商品列表数据
 */
const handleGetShopList = async () => {
    const res = await GetShopInfo(status[current.value], pageConfig.current, 10)
    shoplist.value = [...shoplist.value, ...res.data.records]
    extraMap.value = res.data.extraMap
    pageConfig.current++
}
uni.$on('update', async () => {
    pageConfig.current = 1
    shoplist.value = []
    handleGetShopList()
})
/**
 * 搜索订单
 */

const handleSearchOrder = async (e: string) => {
    const data = await SearchShopInfo(status[current.value], 1, 10, e)
    if (data.code === 200) {
        data.data.records.length > 0 ? (shoplist.value = data.data.records) : uni.showToast({ title: '暂无数据', icon: 'none' })
        console.log(data)
        if (data.data.records.length === 0) {
            shoplist.value = []
        }
    } else {
        uni.showToast({ title: '服务器出错', icon: 'none' })
    }
}

const deliverTypeList = ref<
    {
        label: string
        value: 'IC_MERCHANT' | 'IC_OPEN'
    }[]
>([])
doGetShopDeliveryMethod().then(({ data }) => {
    deliverTypeList.value = data
})
</script>

<template>
    <view class="content" :style="{ height: `${scrollViewHeight}` }">
        <view class="content__header">
            <IconBack style="margin-right: 30rpx" :url="'/pages/user/index'" :type="2"></IconBack>
            <SearchModel :title="'根据商品名称搜索'" :searchtype="2" @search-enter="handleSearchOrder"></SearchModel>
        </view>
        <view class="content__body">
            <view>
                <u-tabs
                    v-model="current"
                    :list="list"
                    height="130"
                    active-color="#333333"
                    inactive-color="#999999"
                    bar-width="50"
                    bar-height="12"
                    font-size="28"
                    bg-color="#F6F6F6"
                    :bar-style="{ backgroundColor: '#4755E9' }"
                    @change="change"
                ></u-tabs>
            </view>
            <view v-if="current === 1 && Number(extraMap?.AllDeliveryCount || 0) >= 1" class="reminder">
                <u-icon name="info-circle-fill" size="46rpx" color="#F60404" />
                <view class="reminder__right">
                    您共有 <span>{{ extraMap.AllDeliveryCount }}</span> 笔待发货的订单，其中小程序端订单有
                    <span>{{ extraMap.miniDeliveryCount || 0 }}</span> 笔，超过 48 小时未发货，将触发支付风险提示，直至暂停小程序交易!!!
                </view>
            </view>
            <scroll-view class="content__body--shoplist" :scroll-y="true" @scrolltolower="handleGetShopList">
                <view v-for="item in shoplist" :key="item">
                    <view style="margin-bottom: 20rpx">
                        <ShopListDetail
                            :deliverTypeList="deliverTypeList"
                            :current="current"
                            :detail="item"
                            :listname="list[current].name"
                        ></ShopListDetail>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
@include b(content) {
    display: flex;
    flex-direction: column;
    padding: 0 12rpx 0 16rpx;
    @include e(header) {
        padding: 20rpx 0 0 0;
        display: flex;
    }
    @include e(body) {
        flex: 1;
        overflow: hidden;
        @include m(shoplist) {
            height: calc(100% - 130rpx);
        }
    }
}
@include b(reminder) {
    display: flex;
    // align-items: center;
    height: 110rpx;
    width: 100%;
    background-color: #fdc3c3;
    font-size: 24rpx;
    padding: 18rpx 12rpx 12rpx 6rpx;
    @include e(right) {
        span {
            color: #f72020;
            font-weight: bold;
        }
    }
}
</style>
